<template>
  <!--面包屑导航-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>仓库管理</el-breadcrumb-item>
                <el-breadcrumb-item>仓库设置</el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
    </el-row>
  <!--查询条件区-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-form v-model="searchWarehouse" style="margin: 15px 0px 0px 0px" inline>
                <el-form-item style="width: 300px;" label="仓库编码">
                    <el-input v-model="searchWarehouse.warehouseId"/>
                </el-form-item>
                <el-form-item style="width: 300px;" label="仓库名称">
                    <el-input v-model="searchWarehouse.warehouseName"/>
                </el-form-item>
                <el-form-item>
                    <el-button @click="search" type="primary">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="cancelSearch">重置</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>

  <!--按钮功能区-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-button-group>
                <el-button @click="insertWH" type="primary" plain>
                    新增
                </el-button>
                <el-button @click="updateWH(chooseIds)" :disabled="chooseIds.length != 1" type="success" plain>
                    修改
                </el-button>
                <el-button @click="deleteWHList" :disabled="chooseIds.length == 0" type="danger" plain>
                    删除
                </el-button>
            </el-button-group>
        </el-col>
    </el-row>
  <!--表格主体-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-table
                    :data="warehouseList"
                    broder
                    :stripe="true"
                    row-key="warehouseId"
                    size="small"
                    @selection-change="changeChooses"
            >
                <el-table-column align="center" type="selection" width="55"/>
                <el-table-column align="center" label="仓库编号">
                    <template #default="scope">
                        <el-link @click="loadDesc(scope.row.warehouseId)" style="font-size: small" type="primary">{{scope.row.warehouseId}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="warehouseName" label="仓库名称"/>
                <el-table-column width="150" align="center" prop="warehousePosition" label="仓库位置"/>
                <el-table-column align="center" label="仓库占地">
                    <template #default="scope">
                        {{scope.row.warehouseArea}} ㎡
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="warehouseDirector" label="仓库负责人"/>
                <el-table-column align="center" prop="warehouseNotes" label="仓库备注"/>
                <el-table-column width="150" align="center" label="操作">
                    <template #default="scope">
                        <el-row>
                            <el-col :span="8">
                                <el-link @click="getAreaList(scope.row.warehouseId)" type="primary">
                                    <el-icon><OfficeBuilding /></el-icon>
                                    库区
                                </el-link>
                            </el-col>
                            <el-col :span="8">
                                <el-link @click="updateWH(scope.row.warehouseId)" type="primary">
                                    <el-icon>
                                        <EditPen/>
                                    </el-icon>
                                    修改
                                </el-link>
                            </el-col>
                            <el-col :span="8">
                                <el-link @click="deleteWarehouse(scope.row.warehouseId)" type="primary">
                                    <el-icon>
                                        <DeleteFilled/>
                                    </el-icon>
                                    删除
                                </el-link>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
  <!--分页-->
  <!--分页栏-->
    <el-row style="margin: 5px 5px;">
        <!-- 监听页码的变化事件 -->
        <el-pagination @change="changePage" :total="total" background layout="prev, pager, next"/>
    </el-row>

    <!--新增弹窗-->
    <el-dialog
        v-model="dialogWarehouseInsert"
        title="新增仓库"
    >
        <el-form v-model="insertWarehouse" label-width="auto">
            <el-form-item  label="仓库名称">
                <el-input v-model="insertWarehouse.warehouseName"/>
            </el-form-item>
            <el-form-item label="仓库位置">
                <el-input v-model="insertWarehouse.warehousePosition"/>
            </el-form-item>
            <el-form-item label="仓库占地">
                <el-input-number :min="1" v-model="insertWarehouse.warehouseArea"/>
            </el-form-item>
            <el-form-item label="仓库负责人">
                <el-input v-model="insertWarehouse.warehouseDirector"/>
            </el-form-item>
            <el-form-item label="仓库备注">
                <el-input type="textarea" v-model="insertWarehouse.warehouseNotes"/>
            </el-form-item>
            <el-form-item>
                <el-button @click="insertWHUP()" type="primary">提交</el-button>
                <el-button @click="cancelInsert">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--修改弹窗-->
    <el-dialog
        v-model="dialogWarehouseUpdate"
        title="修改仓库"
    >
        <el-form v-model="updateWarehouse" label-width="auto">
            <el-form-item  label="仓库名称">
                <el-input v-model="updateWarehouse.warehouseName"/>
            </el-form-item>
            <el-form-item label="仓库位置">
                <el-input v-model="updateWarehouse.warehousePosition"/>
            </el-form-item>
            <el-form-item label="仓库占地">
                <el-input-number :min="1" v-model="updateWarehouse.warehouseArea"/>
            </el-form-item>
            <el-form-item label="仓库负责人">
                <el-input v-model="updateWarehouse.warehouseDirector"/>
            </el-form-item>
            <el-form-item label="仓库备注">
                <el-input type="textarea" v-model="updateWarehouse.warehouseNotes"/>
            </el-form-item>
            <el-form-item>
                <el-button @click="updateWHUP()" type="primary">提交</el-button>
                <el-button @click="cancelUpdate">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--详情弹窗-->
    <el-dialog
        title="仓库详情"
        v-model="dialogWarehouseDesc"
    >
        <el-descriptions>
            <el-descriptions-item label="仓库编号">{{ descWarehouse.warehouseId }}</el-descriptions-item>
            <el-descriptions-item label="仓库名称">{{descWarehouse.warehouseName}}</el-descriptions-item>
            <el-descriptions-item label="仓库位置">{{descWarehouse.warehousePosition}}</el-descriptions-item>
            <el-descriptions-item label="仓库面积">{{descWarehouse.warehouseArea}}㎡</el-descriptions-item>
            <el-descriptions-item label="仓库负责人">{{descWarehouse.warehouseDirector}}</el-descriptions-item>
            <el-descriptions-item label="仓库备注">{{descWarehouse.warehouseNotes}}</el-descriptions-item>
            <el-descriptions-item label="仓库创建时间">{{descWarehouse.warehouseCreateTime}}</el-descriptions-item>
            <el-descriptions-item label="仓库修改">{{descWarehouse.warehouseModifyTime}}</el-descriptions-item>
        </el-descriptions>
    </el-dialog>
</template>

<script setup>

import {ArrowRight} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import warehouse from "@/api/warehouse/warehouse.js";
import {ElMessage, ElMessageBox} from "element-plus";
import fixture from "@/api/fixture/fixture.js";
import {useRouter} from "vue-router";

let dialogWarehouseInsert = ref(false)
let dialogWarehouseUpdate = ref(false)
let dialogWarehouseDesc = ref(false)
let warehouseList = ref([])
let searchWarehouse = ref({})
let pageNum = ref(1)
let total = ref(0)
let insertWarehouse = ref({})
let updateWarehouse = ref({})
let chooseIds = ref ([])
let descWarehouse = ref({})
let router = useRouter()

function getAreaList(warehouseId){
    router.push("area/" + warehouseId)
}

function loadDesc(warehouseId){
    warehouse.loadUpdateInfo(warehouseId,res=>{
        descWarehouse.value = res.data
    })
    dialogWarehouseDesc.value = true
}

function deleteWHList(){
    ElMessageBox.confirm(
        '你确定要删除仓库吗',
        '删除类型',
        {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'error'
        }
    ).then(() => {
        chooseIds.value.forEach(id => {
            warehouse.deleteWarehouse(id, res => {
                loadWarehouseList()
            })
        })
        ElMessage({
            type: "success",
            message: "删除成功"
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        })
    })
}

function changeChooses(value) {
    let tempIds = new Array();
    value.forEach(warehouse => {
        tempIds.push(warehouse.warehouseId)
    })
    chooseIds.value = tempIds;
}

function deleteWarehouse(warehouseId){
    ElMessageBox.confirm(
        '你确定要删除类型吗',
        '类型项目',
        {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'error'
        }
    ).then(() => {
        warehouse.deleteWarehouse(warehouseId, res => {
            if (res.code == 1) {
                ElMessage({
                    type: "success",
                    message: "删除成功"
                })
                loadWarehouseList()
            } else {
                ElMessage({
                    type: "error",
                    message: "网络开了小差，请稍后重试"
                })
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        })
    })
}
function updateWHUP(){
    warehouse.updateWarehouse(updateWarehouse.value,res=>{
        if (res.code == 1) {
            ElMessage({
                type: "success",
                message: "跟新成功"
            })
            loadWarehouseList()
            cancelUpdate()
        } else if (res.code == 300) {
            ElMessage({
                type: "warning",
                message: "仓库名重复"
            })
        } else {
            ElMessage({
                type: "error",
                message: "添加失败"
            })
        }
    })
}

function insertWHUP(){
    if (insertWarehouse.value.warehouseName == undefined || insertWarehouse.value.warehousePosition == undefined || insertWarehouse.value.warehouseArea == undefined || insertWarehouse.value.warehouseDirector == undefined){
        ElMessage({
            type: "error",
            message: "缺少关键元素"
        })
        throw new Error("缺少关键元素")
    }
    insertWarehouse.value.warehouseStatus = 1
    warehouse.insertWarehouse(insertWarehouse.value,res=>{
        if (res.code == 1) {
            ElMessage({
                type: "success",
                message: "添加成功"
            })
            loadWarehouseList()
            cancelInsert()
        } else {
            ElMessage({
                type: "error",
                message: "添加失败"
            })
        }
    })
}
function cancelUpdate(){
    dialogWarehouseUpdate.value = false
    updateWarehouse.value = new ref({})
}

function updateWH(warehouseId){
    dialogWarehouseUpdate.value = true
    warehouse.loadUpdateInfo(warehouseId,res=>{
        updateWarehouse.value = res.data
    })
}

function cancelInsert(){
    dialogWarehouseInsert.value = false
    insertWarehouse.value = new ref({})
}
function insertWH(){
    dialogWarehouseInsert.value = true
}

function changePage(value){
    pageNum.value = value
    loadWarehouseList()
}

function cancelSearch(){
    searchWarehouse.value = new ref({})
    loadWarehouseList()
}
function search(){
    loadWarehouseList()
}

function loadWarehouseList(){
    warehouse.loadWarehouseList(searchWarehouse.value,pageNum.value,10,res=>{
        warehouseList.value = res.list
        total.value = res.total
        console.log(warehouseList.value)
    })
}
onMounted(()=>{
    loadWarehouseList()
})
</script>

<style scoped>

</style>